<script setup lang="ts">

import sidebarMenu from "/cpns/sidebar/SidebarMenu.vue";
const collapsed = ref<Boolean>(true)
const selectedTheme = ref<String>('white-theme')

const menu = reactive([
    {
        header: 'Getting Started',
        hiddenOnCollapse: true,
    },
    {
        href: '/',
        title: 'Installation',
        // icon: faIcon({icon: 'fa-solid fa-download'}),
    }])

const onToggleCollapse = (collapsed: any) => {
    console.log('onToggleCollapse')
}

const onItemClick = (event: any, item: any) => {
    console.log('onItemClick')
    // console.log(event)
    // console.log(item)
}

</script>

<template>
    <div class="user">
        <div>
            asda
        </div>
        <sidebar-menu
                v-model:collapsed="collapsed"
                :menu="menu"
                :theme="selectedTheme"
                :show-one-child="true"
                @update:collapsed="onToggleCollapse"
                @item-click="onItemClick"
        />
    </div>
</template>

<style scoped>

</style>